<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style>
    	.mui-bar-nav{
    		background: deeppink;
    	}
    	h1,a{    		
    		color: #fff!important;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">首页</h1>
	</header>
	<div class="mui-content">
	    实现的过程                                                       <br />
	  1.改写manifest.json, 在plus对象内增加:   <br />
	  'plus': {                               <br />
	  		'statusbar': {'immersed': true}   <br />
	  }  <br />
	  2. 判断系统是否支持沉浸式, 并改写对应头部的padding-top值  <br />
	</div>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init();
		mui.plusReady(function () {
			//判断是否支持沉浸式
			var isImmersedStatusbar = plus.navigator.isImmersedStatusbar();	
			console.log('isImmersedStatusbar:'+ isImmersedStatusbar);
			
			//获取系统状态栏高度
			var StatusbarHeight = plus.navigator.getStatusbarHeight();
			console.log('statusbarHeight:'+StatusbarHeight);
			var headerH = mui('.mui-bar-nav')[0].offsetHeight;
			mui('.mui-bar-nav')[0].style.height= (headerH + StatusbarHeight)+'px';
			mui('.mui-bar-nav')[0].style.paddingTop = '20px';
		})
	</script>
</body>
</html>